/*终止合约*/
import React from 'react';
import {Form, Input, Button, Select, Table, Row, Col, DatePicker, Message } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

let Contract = React.createClass({

  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    return {
      loading: false,
      forms: {},
      cancelRentTime: null
    }
  },

  componentDidMount() {
    this.fetch();
    this.getTime();
  },

  fetch(t) {
    let time = {cancelTime: t}
    let params = Object.assign({}, this.props.location.state, time);
    let _me = this;
    Utils.sendAjax({
      url: '/tenement/refund',
      data: JSON.stringify(params),
      type: 'json',
      callback: function(result) {
        if (result.code == '200') {
          _me.setState({
            forms: result.data
          })
        } else {
          Message.warning(result.message, 10)
        }
      }
    })
  },

  getTime() {
    let now = Utils.formatDate(new Date());
    return this.setState({
      cancelRentTime: now
    })
  },

  handleSubmit(e) {
    e.preventDefault();
    let state = this.props.location.state;
    let goPathUrl = '/landlord/houseResource/list';
    let param = this.props.form.getFieldsValue();
    let ids = {tenementContractId:this.props.location.state.tenementContractId, tenementId: this.props.location.state.tenementId};
    let times = {cancelRentTime: this.state.cancelRentTime};
    let params = Object.assign({}, param, ids, times);
    let _me = this;
    _me.setState({
      loading: true
    });
    Utils.sendAjax({
      url: '/tenement/contract/cancel',
      data: JSON.stringify(params),
      type: 'json',
      callback: function(result) {
        if (result.code == '200') {
          _me.context.router.push({pathname: goPathUrl, state: {...state}})
        } else {
           _me.setState({
            loading: false
          });
          Message.error(result.message, 10)
        }
      }
    })
  },

  handleDate(value) {
    let t = Utils.formatDate(value);
    this.setState({
      cancelRentTime: t
    });
    this.fetch(t);
  },

  render () {

    const { getFieldProps } = this.props.form;
    const forms = this.state.forms;

    console.log(this.props.location)
    return (
      <div>
        <div className="stop-contract">
          <div className="form-group">
            <h3><span>合约信息</span></h3>
          <Form inline>
            <Row gutter={24}>
              <Col sm={8} >
                <FormItem>
                  <p className="statement">注：每月按30天计算</p>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="房源名称">
                  <p>{forms.tenementName ? forms.tenementName : '--'}</p>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="合约开始日期">
                  <p>{forms.startTime}</p>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="合约结束日期">
                  <p>{forms.expireTime}</p>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="已交房租到期日">
                  <p>{forms.rentEndTime}</p>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="退租日期">
                  <DatePicker  onChange={this.handleDate}
                    value={this.state.cancelRentTime}
                    placeholder="请选择退租日期"/>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="已交租金">
                  <p>{forms.payRent ? forms.payRent : '0'}元</p>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="已交押金">
                  <p>{forms.deposit ? forms.deposit : '0'}元</p>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="已交物业费">
                  <p>{forms.tenementFee ? forms.tenementFee : '0'}元</p>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="已交水费">
                  <p>{forms.waterFee ? forms.waterFee : '0'}元</p>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="已交电费">
                  <p>{forms.electricFee ? forms.electricFee : '0'}元</p>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="已交中介费">
                  <p>{forms.agencyFee ? forms.agencyFee : '0'}元</p>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="房租">
                  <p>{forms.rent ? forms.rent : '0'}元/月</p>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="应退回房租">
                  <p>{forms.rentCancel ? forms.rentCancel :  '0'}元</p>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="其它收取金额">
                  <Input  { ...getFieldProps('otherPay', {initialValue: 0}) } placeholder="其它收取金额"/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="应退押金">
                  <Input  { ...getFieldProps('depositCancel', {initialValue: forms.deposit}) } placeholder="应退押金"/>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="其它退回金额">
                  <Input { ...getFieldProps('otherCancel', {initialValue: 0}) } placeholder="其它退回金额"/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="实际退回金额">
                  <Input { ...getFieldProps('cancelAmount', {initialValue: 0}) } placeholder="实际退回金额"/>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem>
                  <Button type="primary" style={{marginLeft: 100, marginBottom: 50}} loading={this.state.loading} onClick={this.handleSubmit} >终止合约</Button>
                </FormItem>
              </Col>
            </Row>
          </Form>
          </div>
        </div>
      </div>
    );
  }
});
Contract = Form.create()(Contract);
export default Contract